<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.什么时候使用分支结构  
			      需求：>=90分 展现优秀
			      需求：>=80分 展现良好
			      需求：>=60分 展现中等
			      需求：<60分 展现不及格
			         语法：v-if 如果满足展现后续操作
					       v-else-if 除上述条件的条件
						   v-else 上诉条件不满足的条件
					 -->
		<h1>考试成绩</h1>
		请输入成绩：<input type="text"  v-model="score"/>
		<h3 v-if="score<0">请输入用户</h3>
	   <h3 v-if="score>=90">优秀</h3>
		<h3 v-else-if="score>=80">良好</h3>
		<h3 v-else-if="score>=60">及格</h3>
		<h3 v-else-if="score<60&&score>=0">不及格，但是你是最骚气的</h3> 
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
		
		const app=new Vue({
			el: '#app',
			data: {
				score: -1
			},
			methods: {
				
			}
			
		})
		
		</script>
	</body>
</html>
